/*
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2025-10-10 09:00:00
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2025-10-10 11:00:00
 * @FilePath: \work-tool\my-dev-project\src\views\dashboard.tsx
 * @Description: 控制台页面
 */
import React, { useEffect, useRef } from 'react';
import { Card, Row, Col, Statistic, Progress, Table, Tag } from 'antd';
import { PieChartOutlined, LineChartOutlined, BarChartOutlined, UserOutlined, ShoppingCartOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import * as echarts from 'echarts';

// 模拟数据
const salesData = [
    { name: '1月', sales: 1200 },
    { name: '2月', sales: 1900 },
    { name: '3月', sales: 1500 },
    { name: '4月', sales: 2400 },
    { name: '5月', sales: 2100 },
    { name: '6月', sales: 3200 },
];

const recentOrdersData = [
    { id: '1', customer: '张三', amount: 1280, status: '已完成', date: '2025-10-09' },
    { id: '2', customer: '李四', amount: 890, status: '处理中', date: '2025-10-08' },
    { id: '3', customer: '王五', amount: 2300, status: '已完成', date: '2025-10-07' },
    { id: '4', customer: '赵六', amount: 1580, status: '已取消', date: '2025-10-06' },
];

type RecentOrder = {
    id: string;
    customer: string;
    amount: number;
    status: string;
    date: string;
};

const columns: ColumnsType<RecentOrder> = [
    { title: '订单编号', dataIndex: 'id', key: 'id' },
    { title: '客户名称', dataIndex: 'customer', key: 'customer' },
    { title: '订单金额', dataIndex: 'amount', key: 'amount', render: (amount) => `¥${amount}` },
    {
        title: '订单状态',
        dataIndex: 'status',
        key: 'status',
        render: (status) => {
            let color = '';
            switch (status) {
                case '已完成':
                    color = 'green';
                    break;
                case '处理中':
                    color = 'blue';
                    break;
                case '已取消':
                    color = 'red';
                    break;
                default:
                    color = 'default';
            }
            return <Tag color={color}>{status}</Tag>;
        }
    },
    { title: '下单日期', dataIndex: 'date', key: 'date' },
];

const Dashboard: React.FC = () => {
    // 创建图表引用
    const chartRef = useRef<HTMLDivElement>(null);
    
    // 初始化echarts图表
    useEffect(() => {
        // 如果ref存在且有DOM节点
        if (chartRef.current) {
            // 初始化图表实例
            const chartInstance = echarts.init(chartRef.current);
            
            // 准备图表配置
            const option = {
                title: {
                    text: '销售额趋势',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: salesData.map(item => item.name),
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '销售额',
                        type: 'bar',
                        barWidth: '60%',
                        data: salesData.map(item => item.sales),
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#83bff6' },
                                { offset: 0.5, color: '#188df0' },
                                { offset: 1, color: '#188df0' }
                            ])
                        }
                    }
                ]
            };
            
            // 设置图表配置
            chartInstance.setOption(option);
            
            // 监听窗口大小变化，重新调整图表大小
            const handleResize = () => {
                chartInstance.resize();
            };
            
            window.addEventListener('resize', handleResize);
            
            // 组件卸载时清理
            return () => {
                window.removeEventListener('resize', handleResize);
                chartInstance.dispose();
            };
        }
    }, []);
    
    return (
        <div style={{ padding: 24, background: '#f0f2f5' }}>
            <Row gutter={[16, 16]}>
                <Col span={6}>
                    <Card title={<span><LineChartOutlined /> 总销售额</span>}>
                        <Statistic
                            value={125800}
                            precision={0}
                            prefix="¥"
                            suffix="元"
                            valueStyle={{ color: '#3f8600' }}
                        />
                        <div style={{ marginTop: 16 }}>
                            <Progress percent={66} status="active" />
                        </div>
                    </Card>
                </Col>
                <Col span={6}>
                    <Card title={<span><ShoppingCartOutlined /> 订单总数</span>}>
                        <Statistic
                            value={864}
                            precision={0}
                            suffix="单"
                            valueStyle={{ color: '#1890ff' }}
                        />
                        <div style={{ marginTop: 16 }}>
                            <Progress percent={45} status="active" />
                        </div>
                    </Card>
                </Col>
                <Col span={6}>
                    <Card title={<span><UserOutlined /> 用户总数</span>}>
                        <Statistic
                            value={12540}
                            precision={0}
                            suffix="人"
                            valueStyle={{ color: '#faad14' }}
                        />
                        <div style={{ marginTop: 16 }}>
                            <Progress percent={82} status="active" />
                        </div>
                    </Card>
                </Col>
                <Col span={6}>
                    <Card title={<span><PieChartOutlined /> 转化率</span>}>
                        <Statistic
                            value={26.5}
                            precision={1}
                            suffix="%"
                            valueStyle={{ color: '#eb2f96' }}
                        />
                        <div style={{ marginTop: 16 }}>
                            <Progress percent={26.5} status="active" />
                        </div>
                    </Card>
                </Col>
            </Row>

            <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
                <Col span={12}>
                    <Card title={<span><BarChartOutlined /> 销售趋势</span>}>
                        {/* 使用echarts渲染销售趋势柱状图 */}
                        <div 
                            ref={chartRef} 
                            style={{ height: 300, width: '100%' }}
                        />
                    </Card>
                </Col>
                <Col span={12}>
                    <Card title="最近订单">
                        <Table
                            columns={columns}
                            dataSource={recentOrdersData}
                            pagination={false}
                            rowKey="id"
                            scroll={{ y: 300 }}
                        />
                    </Card>
                </Col>
            </Row>
        </div>
    );
};

export default Dashboard;